<!-- 返回按钮 -->
<template>
	<button class="back-btn" @click="handleBtnClick()">
		<text class="iconfont">{{props.icon}}</text>
		<slot></slot>
	</button>
</template>

<script setup>
	// props
	const props = defineProps({
		// iconfont 的图标
		icon: {
			type: String,
			default: '&#xe619;'
		},

		// 禁止返回(优选级2)
		disabledBack: {
			type: Boolean,
			default: false,
		},

		// 跳转的地址(优选级1)
		url: String,

		// 是否重定向
		redirect: {
			type: Boolean,
			default: false,
		},

		// 是否关闭所有页面，打开到应用内的某个页面
		reLaunch: {
			type: Boolean,
			default: false,
		},
	});

	// emit
	const emit = defineEmits(['click']);

	// 点击按钮
	const handleBtnClick = () => {
		// 不传url时，抛出点击事件
		if (!props.url) {
			if (props.disabledBack) {
				return emit('click');
			} else {
				return uni.navigateBack();
			}
		}

		if (props.reLaunch) {
			uni.reLaunch({
				url: props.url
			})
		} else if (props.redirect) {
			uni.redirectTo({
				url: props.url
			})
		} else {
			uni.navigateTo({
				url: props.url
			});
		}
	}
</script>

<style lang="scss" scoped>
	.back-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		font-size: 24rpx;
		color: black;
		background-color: transparent;
		padding: 0 16rpx;

		.iconfont {
			font-size: 32rpx;
			line-height: 32rpx;
			margin-right: 8rpx;
		}
	}
</style>